<!DOCTYPE html>
<html color-mode="user" lang="en">
  <head>
    <link rel="icon" href="./img/brand.png" />
    <link rel="stylesheet" href="./mvp.css" />

    <meta charset="utf-8" />
    <meta name="description" content="MVP.css - No classes, no framework. Just semantic HTML and you're done." />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>MVP.css - Minimalist stylesheet for HTML elements</title>
  </head>

  <body>
    <header>
      <nav>
        <a href="https://andybrewer.github.io/mvp/"><img alt="MVP.css" src="./img/brand.png" height="70" /></a>
        <ul>
          <li>Home</li>
          <li><a href="#docs">Docs</a></li>
          <li><a href="#faq">FAQ</a></li>
          <li><a href="https://www.github.com/andybrewer/mvp/" target="_blank">GitHub &nearr;</a></li>
        </ul>
      </nav>
      <h1>MVP.css &mdash; A <u>minimalist</u> stylesheet for HTML elements</h1>
      <p><b>No class names, no frameworks,</b> just <em>semantic</em> HTML and <mark>you're done</mark>.</p>
      <br />
      <p>
        <a download="mvp.html" href="./mvp.html" target="_blank"><i>Download HTML &nearr;</i></a
        ><a download="mvp.css" href="./mvp.css" target="_blank"><b>Download MVP.css (10kb) &nearr;</b></a>
      </p>
      <br /><br />
      <p>
        <sup>PRO TIP</sup> Add this code to a new HTML file:<br /><br /><code id="currentVersion" onclick="copyText('currentVersion');"
          >&lt;link rel="stylesheet" href="https://unpkg.com/mvp.css"&gt; <img src="./img/icon-copy.png" height="15" width="15" style="position: relative; top: 3px"
        /></code>
      </p>
    </header>
    <main>
      <hr />
      <section>
        <header>
          <h2>Simple, reusable components</h2>
          <p>For a clean looking design that doesn't get in the way</p>
        </header>
        <aside>
          <img alt="HTML only" src="./img/html.svg" height="150" />
          <h3>HTML and You're Done</h3>
          <p>MVP styles your root HTML elements, so you don't need to learn a new CSS framework or naming conventions.</p>
          <p>
            <a href="https://www.w3schools.com/TAGS/ref_byfunc.asp" target="_blank"><em>HTML Guide &nearr;</em></a>
          </p>
        </aside>
        <aside>
          <img alt="Mobile friendly" src="./img/mobile.svg" height="150" />
          <h3>Mobile-friendly UI</h3>
          <p>MVP is designed to look great on all browsers and devices out of the box for rapid prototyping.</p>
          <p>It's like an amped up CSS reset that you can toss into any project to get decent styling.</p>
        </aside>
        <aside>
          <img alt="MIT license" src="./img/license.svg" height="150" />
          <h3>MIT License</h3>
          <p>MVP is released under the permissive MIT license so you can freely use it however you'd like.</p>
          <p>That means personal projects, commercial ventures, remixes and more are all welcome.</p>
        </aside>
      </section>
      <hr />
      <section id="testimonials">
        <blockquote>
          <img alt="Quote" src="./img/icon-quote.svg" height="80" /><br />
          "By far the easiest stylesheet I've ever used. It integrates easily into <s>one</s> all of my startup&nbsp;projects."
          <footer><img alt="MVP.css" src="./img/brand.png" height="36" /><br /><br /><i>- Andy Brewer, Author of MVP.css</i></footer>
        </blockquote>
      </section>
      <hr />
      <section id="features">
        <header>
          <h2>Flexibility without complexity</h2>
          <p>A few, clean styling options without all the bells and whistles</p>
        </header>
        <table>
          <thead>
            <tr>
              <th></th>
              <th>MVP.css</th>
              <th>No CSS</th>
              <th>Custom CSS</th>
            </tr>
          </thead>
          <tr>
            <td>Mobile friendly</td>
            <td><b>&#10003;</b></td>
            <td>&#10003;</td>
            <td>&#10003;</td>
          </tr>
          <tr>
            <td>Works out of the box</td>
            <td><b>&#10003;</b></td>
            <td>&#10003;</td>
            <td>&empty;</td>
          </tr>
          <tr>
            <td>Easy to customize</td>
            <td><b>&#10003;</b></td>
            <td>&#10003;</td>
            <td>&empty;</td>
          </tr>
          <tr>
            <td>Only semantic HTML</td>
            <td><b>&#10003;</b></td>
            <td>&#10003;</td>
            <td>&empty;</td>
          </tr>
          <tr>
            <td>No class names</td>
            <td><b>&#10003;</b></td>
            <td>&#10003;</td>
            <td>&empty;</td>
          </tr>
          <tr>
            <td>Perfect for an MVP</td>
            <td><b>&#10003;</b></td>
            <td>&empty;</td>
            <td>&empty;</td>
          </tr>
        </table>
      </section>
      <hr />
      <div id="figure">
        <header>
          <h2>A decent MVP in no time</h2>
          <p>More building and less designing with "set and forget" styling.</p>
        </header>
        <figure>
          <img alt="Stock photo" src="./img/stock.jpg" />
          <figcaption><i>"Uber for X" brainstorming session</i></figcaption>
        </figure>
      </div>
      <hr />
      <article id="docs">
        <h2>Docs</h2>
        <h3 id="html">HTML Reference</h3>
        <aside>
          <p>For a showcase of each styled element, check out the <a href="./mvp.html" target="_blank">quickstart template &nearr;</a>.</p>
        </aside>
        <br />
        <p>MVP.css works with the following HTML elements:</p>
        <ul>
          <li>
            <code>&lt;a&gt;</code> <small>&mdash; text links</small>
            <ul>
              <li><code>&lt;a&gt;&lt;b&gt;</code>, <code>&lt;a&gt;&lt;strong&gt;</code> <small>&mdash; solid link buttons</small></li>
              <li><code>&lt;a&gt;&lt;em&gt;</code>, <code>&lt;a&gt;&lt;i&gt;</code> <small>&mdash; outlined link buttons</small></li>
            </ul>
          </li>
          <li>
            <code>&lt;article&gt;</code> <small>&mdash; content area with normal styling</small>
            <ul>
              <li><code>&lt;article&gt;&lt;aside&gt;</code> <small>&mdash; text callout</small></li>
            </ul>
          </li>
          <li>
            <code>&lt;blockquote&gt;</code> <small>&mdash; quote callout</small>
            <ul>
              <li><code>&lt;blockquote&gt;&lt;footer&gt;</code> <small>&mdash; quote attribution</small></li>
            </ul>
          </li>
          <li><code>&lt;body&gt;</code> <small>&mdash; default parent element</small></li>
          <li><code>&lt;button&gt;</code> <small>&mdash; form buttons</small></li>
          <li><code>&lt;code&gt;</code> <small>&mdash; inline code highlighting</small></li>
          <li>
            <code>&lt;details&gt;</code> <small>&mdash; default expandable content section</small>
            <ul>
              <li><code>&lt;details&gt;&lt;summary&gt;</code> <small>&mdash; expandable heading</small></li>
            </ul>
          </li>
          <li><code>&lt;dialog&gt;</code> <small>&mdash; popup windows</small></li>
          <li><code>&lt;div&gt;</code> <small>&mdash; unstyled element</small></li>
          <li>
            <code>&lt;figure&gt;</code> <small>&mdash; image callouts</small>
            <ul>
              <li><code>&lt;figure&gt;&lt;figcaption&gt;</code> <small>&mdash; image callout captions</small></li>
            </ul>
          </li>
          <li><code>&lt;footer&gt;</code> <small>&mdash; footer area</small></li>
          <li>
            <code>&lt;form&gt;</code> <small>&mdash; small form area</small>
            <ul>
              <li><code>&lt;form&gt;&lt;input&gt;</code> <small>&mdash; short input field</small></li>
              <li><code>&lt;form&gt;&lt;label&gt;</code> <small>&mdash; form field labels</small></li>
              <li>
                <code>&lt;form&gt;&lt;select&gt;</code> <small>&mdash; dropdown options container</small>
                <ul>
                  <li><code>&lt;form&gt;&lt;select&gt;&lt;option&gt;</code> <small>&mdash; dropdown option items</small></li>
                </ul>
              </li>
              <li><code>&lt;form&gt;&lt;textarea&gt;</code> <small>&mdash; large input field</small></li>
            </ul>
          </li>
          <li><code>&lt;header&gt;</code> <small>&mdash; content area with centered styling</small></li>
          <li><code>&lt;h1&gt;</code>, <code>&lt;h2&gt;</code>, <code>&lt;h3&gt;</code>, <code>&lt;h4&gt;</code>, <code>&lt;h5&gt;</code>, <code>&lt;h6&gt;</code> <small>&mdash; headings</small></li>
          <li><code>&lt;hr&gt;</code> <small>&mdash; horizontal rule (divider)</small></li>
          <li><code>&lt;main&gt;</code> <small>&mdash; main content area</small></li>
          <li><code>&lt;mark&gt;</code> <small>&mdash; text highlighting</small></li>
          <li>
            <code>&lt;nav&gt;</code> <small>&mdash; top navigation</small>
            <ul>
              <li><code>&lt;nav&gt;&lt;ul&gt;</code> <small>&mdash; nav links container</small></li>
              <li><code>&lt;nav&gt;&lt;ul&gt;&lt;li&gt;</code> <small>&mdash; nav link items</small></li>
              <li><code>&lt;nav&gt;&lt;ul&gt;&lt;li&gt;&lt;ul&gt;</code> <small>&mdash; nav dropdown container</small></li>
              <li><code>&lt;nav&gt;&lt;ul&gt;&lt;li&gt;&lt;ul&gt;&lt;li&gt;</code> <small>&mdash; nav dropdown link items</small></li>
            </ul>
          </li>
          <li>
            <code>&lt;ol&gt;</code> <small>&mdash; numbered list container</small>
            <ul>
              <li><code>&lt;ol&gt;&lt;li&gt;</code> <small>&mdash; numbered list items</small></li>
            </ul>
          </li>
          <li><code>&lt;p&gt;</code> <small>&mdash; paragraph tag</small></li>
          <li>
            <code>&lt;pre&gt;</code> <small>&mdash; preformatted text</small>
            <ul>
              <li><code>&lt;pre&gt;&lt;code&gt;</code> <small>&mdash; code block</small></li>
              <li><code>&lt;pre&gt;&lt;samp&gt;</code> <small>&mdash; computer output block</small></li>
            </ul>
          </li>
          <li><code>&lt;samp&gt;</code> <small>&mdash; inline computer output</small></li>
          <li>
            <code>&lt;section&gt;</code> <small>&mdash; content area for centered / special content</small>
            <ul>
              <li><code>&lt;section&gt;&lt;aside&gt;</code> <small>&mdash; content card</small></li>
            </ul>
          </li>
          <li><code>&lt;small&gt;</code> <small>&mdash; smaller text</small></li>
          <li><code>&lt;sup&gt;</code> <small>&mdash; raised text (notification bubbles)</small></li>
          <li>
            <code>&lt;table&gt;</code> <small>&mdash; data table</small>
            <ul>
              <li><code>&lt;table&gt;&lt;td&gt;</code> <small>&mdash; data table cell</small></li>
              <li><code>&lt;table&gt;&lt;th&gt;</code> <small>&mdash; data table header cell</small></li>
              <li><code>&lt;table&gt;&lt;thead&gt;</code> <small>&mdash; data table header section</small></li>
              <li><code>&lt;table&gt;&lt;tr&gt;</code> <small>&mdash; data table row</small></li>
            </ul>
          </li>
          <li>
            <code>&lt;ul&gt;</code> <small>&mdash; unordered list container</small>
            <ul>
              <li><code>&lt;ul&gt;&lt;li&gt;</code> <small>&mdash; unordered list item</small></li>
            </ul>
          </li>
        </ul>
        <br />
        <h3 id="variables">Modifying the CSS variables</h3>
        <p>MVP.css includes a list of CSS variables. Editing these variables will change the styles globally.</p>
        <pre>
                <code>
:root {
    --active-brightness: 0.85;
    --border-radius: 5px;
    --box-shadow: 2px 2px 10px;
    --color-accent: #118bee15;
    --color-bg: #fff;
    --color-bg-secondary: #e9e9e9;
    --color-link: #118bee;
    --color-secondary: #920de9;
    --color-secondary-accent: #920de90b;
    --color-shadow: #f4f4f4;
    --color-table: #118bee;
    --color-text: #000;
    --color-text-secondary: #999;
    --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    --hover-brightness: 1.2;
    --justify-important: center;
    --justify-normal: left;
    --line-height: 1.5;
    --width-card: 285px;
    --width-card-medium: 460px;
    --width-card-wide: 800px;
    --width-content: 1080px;
}
                </code>
            </pre>

        <p>Custom styles can be added inside a <code>&lt;style&gt;</code> tag, or at the end of your local <code>mvp.css</code> file</p>
      </article>
      <hr />
      <article id="faq">
        <h2>Frequently Asked Questions</h2>
        <details>
          <summary>Why would I use this?</summary>
          <p>If you just want to launch already.</p>
          <p><sup>PRO TIP</sup> An MVP is a temporary site, it doesn't have to be <i>and shouldn't be</i> perfect.</p>
        </details>
        <details>
          <summary>What skills will I need?</summary>
          <p>Mostly HTML, maybe a hint of CSS if you want to get fancy.</p>
          <p><i>CSS</i>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <progress max="100" value="5">5</progress></p>
          <p><i>Design</i>&nbsp;&nbsp; <progress max="100" value="0">0</progress></p>
          <p><i>HTML</i>&nbsp;&nbsp;&nbsp;&nbsp; <progress max="100" value="100">100</progress></p>
        </details>
        <details>
          <summary>Is there a minified version?</summary>
          <p>No, you don't need one for an MVP.</p>
        </details>
        <details>
          <summary>How can I improve my design?</summary>
          <p>Here are some helpful resources:</p>
          <ul>
            <li>Emojis - <a href="https://www.emojicopy.com/" target="_blank">Emojicopy &nearr;</a></li>
            <li>Icons - <a href="https://www.toptal.com/designers/htmlarrows/" target="_blank">HTML Entities List by TopTal &nearr;</a></li>
            <li>Icons - <a href="https://thenounproject.com/" target="_blank">TheNounProject &nearr;</a></li>
            <li>Illustrations - <a href="https://gallery.manypixels.co/" target="_blank">Manypixels &nearr;</a></li>
            <li>Illustrations - <a href="https://undraw.co/illustrations" target="_blank">Undraw &nearr;</a></li>
            <li>Logo - <a href="https://www.namecheap.com/logo-maker/app/" target="_blank">Namecheap Logo Maker &nearr;</a></li>
            <li>Product Shots - <a href="https://www.screely.com/" target="_blank">Screely &nearr;</a></li>
            <li>Stock Photos - <a href="https://www.pexels.com/" target="_blank">Pexels &nearr;</a></li>
            <li>Stock Photos - <a href="https://unsplash.com/" target="_blank">Unsplash &nearr;</a></li>
          </ul>
        </details>
        <details>
          <summary>How do I handle a user's dark mode preference?</summary>
          <p>
            By default <code>&lt;html&gt;</code> will force users into light mode. By using <code>&lt;html color-mode="user"&gt;</code> MVP.css will respect the user's dark mode preferences. The
            original concept and additional tips can be found in this article: <a href="https://ryanfeigenbaum.com/dark-mode/" target="_ext">https://ryanfeigenbaum.com/dark-mode/</a>
          </p>
        </details>
        <details>
          <summary>What if I don't like the default styles?</summary>
          <p>Most styles are editable through <em>CSS variables</em>. You can also add your own styles inline, at the end of MVP.css or in a new stylesheet.</p>
          <p><sup>PRO TIP</sup> If there are two conflicting CSS styles, the last one will take precedence.</p>
          <pre>
                    <code>
:root {
    --color-bg: #fff;
}

/* Lower in the CSS, or in a 2nd stylesheet */

:root {
    --color-bg: #000; /* This will take precedence */
}
                    </code>
                </pre>
        </details>
        <details>
          <summary>What if I still don't like it?</summary>
          <p>That's OK, you probably shouldn't love your MVP. The goal of MVP.css is to help you feel <i>slightly</i> less embarrased about it.</p>
          <p>
            <span style="font-size: xx-large; position: relative; top: 6px; margin-right: 7px">👉</span> If you want a CSS framework with more features check out
            <a href="https://bulma.io/" target="_blank">Bulma &nearr;</a> or <a href="https://tailwindcss.com/" target="_blank">Tailwind &nearr;</a>.
          </p>
        </details>
      </article>
      <hr />
      <section id="ideas">
        <header>
          <img alt="Idea" src="./img/idea.svg" height="200" />
          <h2>What can you build with MVP.css?</h2>
          <p>Free ideas below &darr;</p>
        </header>
        <form>
          <header>
            <img alt="MVP.css" src="./img/brand.png" height="80" />
          </header>
          <label for="company">A company you like:</label>
          <input type="text" id="company" name="company" size="28" placeholder="Company name" />
          <label for="hobby">A hobby you like:</label>
          <textarea cols="28" rows="2" id="hobby"></textarea>
          <label for="model">Business Model:</label>
          <select id="model">
            <option value="bootstrapped">bootstrapped</option>
            <option value="VC-backed">funded</option>
          </select>
          <label>Team Size:</label>
          <input type="radio" id="founders-solo" name="founders" value="a solo founder" checked /> <label for="founders-solo">Solo</label>
          <input type="radio" id="founders-co" name="founders" value="two co-founders" /> <label for="founders-co">Co-founders</label>
          <label>Focus:</label>
          <input type="checkbox" id="focus-price" name="focus[]" value="price" checked /> <label for="focus-price">Price</label>
          <input type="checkbox" id="focus-service" name="focus[]" value="service" /> <label for="focus-service">Service</label>
          <input type="checkbox" id="focus-features" name="focus[]" value="features" /> <label for="focus-features">Features</label>
          <label for="valuation">Valuation:</label>
          <input type="range" id="valuation" name="valuation" value="50" />
          <br />
          <button type="submit" id="show">Submit</button>
        </form>
        <dialog id="popup">
          <div id="results"></div>
          <button id="close">Close</button>
        </dialog>
      </section>

      <!-- Dialog HTML Element Example -->
      <section>
        <button style="margin-top: 6rem" popovertarget="dialog-modal" id="openDialog">Open Dialog</button>

        <dialog popover id="dialog-modal">
          <h3>Hello, I am a header of the modal</h3>
          <hr>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos ullam at assumenda cum placeat aperiam ab error, doloribus eligendi sit. Lorem ipsum dolor sit amet consectetur adipisicing
            elit. Quos ullam.
          </p>
        </dialog>
      </section>
    </main>
    <footer>
      <hr />
      <p>Made by <a href="https://www.andybrewer.com" target="_blank">Andy Brewer &nearr;</a><br /></p>
    </footer>

    <script>
      function copyText(el) {
        var data = [new ClipboardItem({ "text/plain": new Blob([document.getElementById(el).innerText], { type: "text/plain" }) })];
        navigator.clipboard.write(data).then(
          function () {
            alert("Copied to clipboard");
          },
          function () {
            console.error("Unable to write to clipboard. :-(");
          }
        );
      }

      var dialog = document.getElementById("popup");
      document.querySelector("#show").onclick = function () {
        let company = document.getElementById("company").value || "GitHub";
        let focusAreas = [];
        document.querySelectorAll("input[name='focus[]']:checked").forEach((el) => {
          focusAreas.push(el.value);
        });
        let focus = focusAreas.join(" / ") || "stealthy growth";
        let founders = document.querySelector("input[name='founders']:checked").value;
        let hobby = document.getElementById("hobby").value || "design";
        let model = document.getElementById("model").value;
        let valuation = document.getElementById("valuation").value;

        document.getElementById(
          "results"
        ).innerHTML = `<h3>Amazing Idea &mdash;</h3><p>A ${model} <mark><b>${company} for ${hobby}</b></mark> with ${founders} and a focus on ${focus}, targeting a $${valuation}B valuation.</p>`;
        dialog.show();
        return false;
      };
      document.querySelector("#close").onclick = function () {
        dialog.close();
        return false;
      };
    </script>
  </body>
</html>
